<template>
    <div>
        <div v-if="articleVisible">
            <!-- 搜索版块 -->
            <nav-list @closeEdit="closeEdit" />
            <div class="list_box">
                <div class="list_table">
                    <el-table
                        ref="multipleTableRef"
                        :data="
                            tableData.slice(
                                (pages.currentPage - 1) * pages.pagesize,
                                pages.currentPage * pages.pagesize
                            )
                        "
                        style="width: 100%"
                    >
                        <el-table-column align="center" type="selection" width="55" />
                        <el-table-column
                            align="left"
                            property="name"
                            label="文章标题"
                            width="220"
                        />
                        <el-table-column align="left" property="cover" label="文章封面" />
                        <el-table-column align="left" property="owningSite" label="文章分类" />
                        <el-table-column
                            align="center"
                            property="state"
                            label="文章状态"
                            width="150"
                        />
                        <el-table-column align="center" property="sort" label="排序" width="100" />
                        <el-table-column align="left" label="创建时间" width="150">
                            <template #default="scope">{{ scope.row.date }}</template>
                        </el-table-column>
                        <el-table-column align="left" label="更新时间" width="150">
                            <template #default="scope">{{ scope.row.date }}</template>
                        </el-table-column>
                        <el-table-column align="left" label="操作">
                            <template #default="scope">
                                <el-button
                                    @click="
                                        delectArticle(
                                            scope.row.state === '已上线' ? '编辑' : '编辑',
                                            scope.row
                                        )
                                    "
                                    class="table-button"
                                    >{{ scope.row.state === "已上线" ? "编辑" : "编辑" }}</el-button
                                >
                                <el-button
                                    v-if="scope.row.state !== '已删除'"
                                    @click="
                                        delectArticle(
                                            scope.row.state === '已上线' ? '下线' : '上线',
                                            scope.row.id
                                        )
                                    "
                                    class="table-button"
                                    >{{ scope.row.state === "已上线" ? "下线" : "上线" }}</el-button
                                >
                                <el-button
                                    @click="delectArticle('del', scope.row.id)"
                                    v-if="scope.row.state !== '已删除'"
                                    >删除</el-button
                                >
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <Pagination
                    :pages="pages"
                    :tableData="tableData"
                    @presentPages="presentPages"
                ></Pagination>
            </div>
        </div>
        <ViewArticle v-if="viewArticle" :viewData="viewData" @closeEdit="closeEdit"></ViewArticle>
        <!-- 文章详情 -->
        <NewEdit v-if="newVisible" @closeEdit="closeEdit" :viewData="viewData"></NewEdit>
        <!-- 新增/编辑文章 -->
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import NavList from "@/views/components/article/NavList.vue";
import ViewArticle from "@/views/components/article/ViewArticle.vue";
import NewEdit from "@/views/components/article/NewEdit.vue";
import Pagination from "@/views/components/common/Pagination.vue";
const articleVisible = ref(true);
const viewArticle = ref(false);
const newVisible = ref(false);
const pages = reactive({
    currentPage: 1,
    pagesize: 10,
});
const beforeChange = (state: boolean) => {
    if (state) {
        ElMessage({
            message: "操作成功",
            type: "success",
        });
    } else {
        ElMessage({
            message: "分类状态暂时无法关闭，该分类存在已添加的文章，请将文章转移至其他分类后重试！",
            type: "warning",
        });
    }
};
const tableData: any = ref([
    {
        date: "2016-05-03",
        name: "这是一条文章标题",
        cover: "@/static/images/tx.png",
        owningSite: "行业新闻",
        sort: 0,
        state: "已上线",
        id: 1,
    },
    {
        date: "2016-05-06",
        name: "这是一条文章标题2",
        cover: "@/static/images/tx.png",
        owningSite: "行业新闻",
        sort: 0,
        state: "已上线",
        id: 6,
    },
    {
        date: "2016-05-07",
        name: "这是一条文章标题3",
        cover: "@/static/images/tx.png",
        owningSite: "公司新闻",
        sort: 0,
        state: "已上线",
        id: 7,
    },
    {
        date: "2016-05-07",
        name: "这是一条文章标题4",
        cover: "@/static/images/tx.png",
        owningSite: "招聘信息",
        sort: 0,
        state: "已下线",
        id: 8,
    },
]);
const viewData = ref({
    img: "",
    title: "",
    time: "",
    classificati: "",
    sort: "",
    state: "",
    text: "",
});
const delectArticle = (d: string, id: any) => {
    const condition: any = new Map([
        [
            "编辑",
            () => {
                articleVisible.value = false;
                viewArticle.value = false;
                newVisible.value = true;
                viewData.value.img = id.cover;
                viewData.value.title = id.name;
                viewData.value.time = id.date;
                viewData.value.sort = id.sort;
                viewData.value.classificati = id.owningSite;
                viewData.value.state = id.state;
                viewData.value.text =
                    "<div><div><span>1.</span><span><span><span><span>11111111111111111</span></span></span><span><span><span>😅</span></span></span></span></div><div><span>2.</span><span><span><span><span>22222222222222222</span></span></span><span><span><span>😆</span></span></span></span></div><div><span>3.</span><span><span><span><span>33333333333333333</span></span></span><span><span><span>😎</span></span></span></span></div></div>";
            },
        ],
        [
            "del",
            () => {
                ElMessageBox.confirm("是否确认删除该分类", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                    draggable: true,
                })
                    .then(() => {
                        tableData.value.forEach((item: any, index: number) => {
                            if (id === item.id) {
                                tableData.value.splice(index, 1);
                            }
                        });
                        ElMessage({
                            type: "success",
                            message: "删除成功",
                        });
                    })
                    .catch(() => {
                        ElMessage({
                            type: "info",
                            message: "取消删除",
                        });
                    });
            },
        ],
        [
            "下线",
            () => {
                ElMessageBox.confirm("是否确认下线该文章", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                    draggable: true,
                })
                    .then(() => {
                        ElMessage({
                            type: "success",
                            message: "下线成功",
                        });
                    })
                    .catch(() => {
                        ElMessage({
                            type: "info",
                            message: "取消下线",
                        });
                    });
            },
        ],
        [
            "查看",
            () => {
                articleVisible.value = false;
                viewArticle.value = true;
                newVisible.value = false;
                viewData.value.img = id.cover;
                viewData.value.title = id.name;
                viewData.value.time = id.date;
                viewData.value.classificati = id.owningSite;
                viewData.value.state = id.state;
                viewData.value.text = "<p>11111111111111111</p>";
            },
        ],
    ]);
    condition.get(d)();
};
const closeEdit = (data: boolean) => {
    articleVisible.value = !data;
    viewArticle.value = false;
    newVisible.value = data;
};
const presentPages = (data: any) => {
    pages.currentPage = data.currentPage;
    pages.pagesize = data.pagesize;
};
</script>
<style lang="scss" scoped>
@import "@/static/css/common.scss";

svg {
    width: 14px;
    height: 14px;
    fill: #fff;
    margin-right: 4px;
}

.inner_icon {
    fill: #4d70ff;
    margin-right: 2px;
}

.inner_icon:hover {
    fill: #2d56fa;
}
</style>
